<div ng-include="'org/cboard/view/config/chart/template/config.html'"></div>
<div class="form-group">
    <label class="col-sm-2 control-label">{{'CONFIG.WIDGET.VALUE_AXIS'|translate}}</label>
    <div class="col-sm-10">
        <table class="table table-bordered">
            <tr>
                <th style="width: 25px"></th>
                <th style="width: 120px">{{'CONFIG.WIDGET.AXIS_NAME'|translate}}</th>
                <th style="width: 100px">{{'CONFIG.WIDGET.CHART'|translate}}</th>
                <th style="width: 100%">{{'CONFIG.WIDGET.VALUE'|translate}}</th>
            </tr>
            <tr ng-repeat="v in curWidget.config.values">
                <td>
                    <span class="text-red" style="display: block;margin-top: 7px;">
                        <i class="fa fa-trash-o" style="cursor: pointer;vertical-align: middle;"
                           ng-click="deleteValue(v.cols);curWidget.config.values.splice($index, 1)"></i>
                    </span>
                </td>
                <td>
                    <input type="text" ng-model="v.name" class="form-control"/>
                </td>
                <td>
                    <select class="form-control" ng-model="v.series_type" style="padding: 0px;"
                            ng-options="type.value as type.name for type in value_series_types"></select>
                </td>
                <td dnd-list="v.cols" dnd-inserted="dndTransfer.toCol(v.cols,index,item,type)"
                    dnd-allowed-types="['select','col','group','key','exp','filter']">
                    <div class="dndPlaceholder sort-highlight"
                         style="height: 24px; width: 93px;margin: 3px 3px;display: inline-block;vertical-align: middle;">
                    </div>
                    <div ng-repeat="o in v.cols" dnd-draggable="o" dnd-type="o.type=='exp'?'exp':'col'"
                         dnd-effect-allowed="move"
                         dnd-moved="v.cols.splice($index, 1)" class="btn-group" style="margin: 3px 3px;">
                        <ng-switch on="o.type">
                            <div ng-switch-when="exp" class="btn-group">
                                <button type="button" class="btn btn-primary btn-sm" style="cursor: move;" ng-click="expressions.push(o);v.cols.splice($index, 1);">
                                    {{o.alias?o.alias:o.exp}}
                                </button>
                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                        ng-click="editExp(o)">
                                    <span class="fa fa-edit"></span>
                                </button>
                            </div>
                            <div ng-switch-default class="btn-group">
                                <button type="button"
                                        ng-click="curWidget.config.selects.push(o.col);v.cols.splice($index, 1);"
                                        class="btn btn-default btn-sm" style="cursor: move;">
                                    {{o.aggregate_type+'('+o.col+')'+ (o.alias?(' -> '+o.alias):'')}}
                                </button>
                                <button type="button" class="btn btn-default btn-sm dropdown-toggle"
                                        data-toggle="dropdown">
                                    <span class="fa fa-edit"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><input class="form-control" ng-model="o.alias" placeholder="{{'CONFIG.WIDGET.ALIAS'|translate}}"></li>
                                    <li ng-repeat="a in value_aggregate_types">
                                        <a ng-click="o.aggregate_type=a.value">{{a.name+'('+o.col+')'}}</a>
                                    </li>
                                </ul>
                            </div>
                        </ng-switch>
                    </div>
                </td>
            </tr>
            <tr>
                <th colspan="5">
                    <button type="button" class="btn btn-info btn-sm" ng-click="curWidget.config.valueAxis=curWidget.config.valueAxis == 'horizontal'?'vertical':'horizontal';console.log(curWidget.config.valueAxis);">
                        {{'CONFIG.WIDGET.'+curWidget.config.valueAxis|uppercase|translate}}
                    </button>
                    <button type="button" class="btn btn-info btn-sm" ng-click="add_value()">
                        {{'CONFIG.WIDGET.ADD_NEW_AXIS'|translate}}
                    </button>
                </th>
            </tr>
        </table>
    </div>
</div>
